import 'package:flutter/material.dart';
import 'package:flutter_shopping/utils/colors.dart';

///
/// 选项卡
///
class Categories extends StatefulWidget {
  const Categories({
    super.key,
  });

  @override
  State<Categories> createState() => _CategoriesState();
}

class _CategoriesState extends State<Categories> {
  final List<String> titles = ["Hand bag", "Jewellery", "Footwear", "Dresses"];
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 25,
      child: ListView.builder(
        itemCount: titles.length,
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 20),
        itemBuilder: (context, index) {
          return GestureDetector(
            onTap: () => setState(() {
              selectedIndex = index;
            }),
            child: Padding(
              padding: const EdgeInsets.only(right: 25),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    titles[index],
                    style: TextStyle(
                      color: selectedIndex == index ? kTextColor : kTextLightColor,
                    ),
                  ),
                  Container(
                    width: 30,
                    height: 2,
                    color: selectedIndex == index ? Colors.black : Colors.transparent,
                  )
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
